<template>
  <view class="view-wrapper" :style="visible ? 'bottom:0;opacity:1;' : 'bottom: -100%;opacity:0;'">
    <view class="mask" @click="handleCancel"></view>
    <view class="wrapper">
      <!-- 商品信息 -->
      <view class="goods-info">
        <view class="image">
          <image :src="goods.cover_url"></image>
        </view>

        <view class="goods-left">
          <view class="goods-title">{{ goods.name }}</view>
          <view class="goods-price">￥{{ formatPrice(currPrice).big }}.{{ formatPrice(currPrice).small }}</view>
        </view>

        <!-- 数量调整 -->

        <view class="goods-count">
          <view class="count-sub" @click="handleSub()">-</view>

          <input type="number" class="count-input" v-model="count" @blur="handleInputCount($event, goods.count)" />

          <view class="count-add" @click="handleAdd(goods.count)">+</view>

          <view class="count-limit">(限购：{{ goods.count }})</view>
        </view>
      </view>

      <!-- 参数选择 -->
      <view class="params-select">
        <text
          :class="['params', currParam.id == param.id ? 'choose-param' : '']"
          v-for="param in params"
          :key="param.id"
          @click="handleChooseParam(param)"
        >
          {{ param.name }}
        </text>
      </view>

      <!-- 修改按钮 -->
      <view class="submit-wrapper">
        <view class="cancel-btn" @click="handleCancel()">取消</view>
        <view class="submit-btn" @click="handleSubmit()">确定</view>
      </view>
    </view>
  </view>
</template>

<script>
import { formatPrice, calculateTotalPrice } from '../../utils/formatPrice'
export default {
  components: {},
  props: {
    visible: Boolean,
    infoid: {
      type: Object,
      require: true,
      default: {
        goods_id: '',
        goods_param_id: ''
      }
    },
    ordercount: Number
  },

  watch: {
    visible(n, o) {
      // console.log(n)
      if (n) {
        this.count = this.ordercount
        this.searchCurrParam()
      }
    },
    infoid: {
      handler(n, o) {
        // console.log(n)
        this.getData()
      },
      immediate: true,
      deep: true
    },
    count(n) {
      this.currPrice = calculateTotalPrice(this.currParam.price, n)
    }
  },

  data() {
    return {
      goods: {},
      params: [],
      currParam: {},
      currPrice: '',
      count: this.ordercount,
      formatPrice
    }
  },

  methods: {
    async getData() {
      const { data: goods } = await this.getGoodsInfo()
      if (goods.status != 200) {
        uni.showToast({
          icon: 'none',
          title: '获取商品信息失败'
        })
        return
      }

      this.goods = goods.data
      // console.log(this.goods)
      // 获取参数
      const { data: params } = await this.getParams()

      if (params.status != 200) {
        uni.showToast({
          icon: 'none',
          title: '获取商品参数失败'
        })
        return
      }

      this.params = params.data
      this.searchCurrParam()
    },
    getGoodsInfo() {
      return uni.request({
        url: this.$domain.data + '/getSingleMinGoods/' + this.infoid.goods_id
      })
    },

    getParams() {
      return uni.request({
        url: this.$domain.data + '/getGoodsParamList/' + this.infoid.goods_id
      })
    },

    searchCurrParam() {
      for (let i = 0; i < this.params.length; i++) {
        let element = this.params[i]
        if (element.id == this.infoid.goods_param_id) {
          this.currParam = element
          // 计算当前金额
          this.currPrice = calculateTotalPrice(this.currParam.price, this.count)
          return
        }
      }
    },
    handleChooseParam(param) {
      // console.log(param)
      this.currParam = param
      // 计算当前金额
      this.currPrice = calculateTotalPrice(this.currParam.price, this.count)
    },
    handleCancel() {
      this.$emit('update:visible', false)
    },
    handleSubmit() {
      this.$emit('update:visible', false)
      this.$emit('submit', {
        goods_id: this.goods.id,
        param: this.currParam,
        count: this.count
      })
      // uni.showToast({
      //   title: '修改成功'
      // })
    },

    handleSub() {
      if (this.count === 1) {
        return
      }
      this.count--
    },
    handleAdd(limit) {
      if (this.count === limit) {
        return
      }
      this.count++
    },
    handleInputCount(e, limit) {
      // console.log(e, limit)
      try {
        const count = parseInt(e.detail.value)

        if (count <= 0) {
          this.count = 1
          uni.showToast({
            icon: 'none',
            title: '数量最小为1'
          })
          return
        }

        if (count <= limit) {
          this.count = count

          return
        }
        this.count = limit
        uni.showToast({
          icon: 'none',
          title: '已超过最大数量'
        })
      } catch {
        this.count = 1
        return
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.view-wrapper {
  width: 100vw;
  height: 100vh;
  transition: 0.6s ease-in-out;
  position: fixed;

  bottom: 0%;
  left: 0%;
  z-index: 50;
}

.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0%;
  right: 0%;
}

.goods-count {
  position: absolute;
  right: 20upx;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 20upx;

  width: 230upx;
  height: 60upx;
  border: 3upx solid rgba($color: #000000, $alpha: 0.06);
  border-radius: 10upx;

  .count-add,
  .count-sub {
    flex: 1;

    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-weight: 900;
  }

  .count-add {
    border-radius: 0 10upx 10upx 0;
    border-left: 3upx solid rgba($color: #000000, $alpha: 0.06);
  }

  .count-sub {
    border-radius: 10upx 0 0 10upx;
    border-right: 3upx solid rgba($color: #000000, $alpha: 0.06);
  }

  .count-input {
    flex: 2;
    text-align: center;
  }

  .count-limit {
    color: #6f6d6d;
    font-size: 20upx;
    position: absolute;
    bottom: -30upx;
    font-weight: 900;
  }
}

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;

  // #ifndef H5
  bottom: 0%;
  // #endif

  // #ifdef H5
  bottom: 65upx;
  //#endif
  left: 0%;
  width: 100%;
  min-height: 400upx;
  background-color: #fff;
  border-top: 1upx solid rgba($color: #000000, $alpha: 0.1);
  border-radius: 20upx 20upx 0 0;
  padding: $def-padding 50upx;
  box-sizing: border-box;

  .goods-info {
    width: 100%;
    display: flex;
    position: relative;
    .image {
      width: 100upx;
      height: 100upx;
      margin-left: 10upx;
      margin-right: 15upx;
      border-radius: $def-radius;
      overflow: hidden;
      image {
        width: 100%;
        height: 100%;
      }
    }

    .goods-left {
      .goods-title {
        font-size: 30upx;
        color: $uni-text-color;
        font-weight: 900;
      }
      .goods-price {
        color: $def-price-color;
        font-weight: 900;
      }
    }
  }

  .params-select {
    display: grid;
    gap: 20upx;
    grid-template-columns: max-content;
    margin: 40upx 0;

    .params {
      color: $uni-text-color;
      display: inline;
      background-color: rgba($color: #000000, $alpha: 0.06);
      padding: 10upx 40upx;
      border-radius: 10upx;
      font-size: 30upx;
      cursor: pointer;
    }

    .choose-param {
      color: #fff;

      background-color: rgba($color: #f75916, $alpha: 0.7);
      box-sizing: border-box;
    }
  }

  .submit-wrapper {
    display: flex;
    justify-content: space-around;

    .cancel-btn,
    .submit-btn {
      width: 200upx;
      height: 70upx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 40upx;
      color: #fff;
      cursor: pointer;
    }

    .cancel-btn {
      background: rgba($color: #000000, $alpha: 0.1);
      color: #fff;
    }

    .submit-btn {
      background: $def-submit-bg;
    }
  }
}
</style>
